<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import { get_Schoolflow } from '@/request';
var option = {
    legend: { textStyle: { color: '#fff' }, icon: 'circle' },
    tooltip: {},
    dataset: {
        dimensions: ['product', '2015', '2016', '2017'],
        source: [
            { product: '1月', 2015: 43.3, 2016: 85.8, 2017: 93.7 },
            { product: '2月', 2015: 83.1, 2016: 73.4, 2017: 55.1 },
            { product: '3月', 2015: 86.4, 2016: 65.2, 2017: 82.5 },
            { product: '4月', 2015: 72.4, 2016: 53.9, 2017: 39.1 },
            { product: '5月', 2015: 72.4, 2016: 53.9, 2017: 39.1 },
            { product: '6月', 2015: 72.4, 2016: 53.9, 2017: 39.1 }
        ]
    },
    grid:{
        height:'90'
    },
    xAxis: {
        type: 'category',
         axisLine: {
            lineStyle: {
                color: '#FFFFFF'
            }
        },
    },
    yAxis: {
        axisLine: {
            lineStyle: {
                color: '#FFFFFF'
            }
        },
    },
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: [{
        type: 'bar',
        itemStyle: {
            normal: {
                barBorderRadius: [20,20, 20,20],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#C000FF' },
                    { offset: 0.5, color: '#9E0DFF' },
                    { offset: 1, color: '#3034FF' }
                ])
            },
        },
    }, {
        type: 'bar',
        itemStyle: {
            normal: {
                barBorderRadius: [20, 20, 20, 20],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#40E496' },
                    { offset: 0.5, color: '#25C45D' },
                    { offset: 1, color: '#029A0E' }
                ])
            },

        },
    }]
};
onMounted(() => {
    var chartDom = document.getElementById('school');
    var myChart = echarts.init(chartDom);
    get_Schoolflow().then(resp => {
        console.log('校园人员流动情况', resp)
        let tempData = option.legend.data = resp.data.data.result[0].dimensions.slice(1)
        option.xAxis.data = resp.data.data.result[0].source.map(item => item.product)

        let colorArr = [
            [
                { offset: 0, color: '#C000FF' },
                { offset: 0.5, color: '#9E0DFF' },
                { offset: 1, color: '#3034FF' }
            ],
            [
                { offset: 0, color: '#40E496' },
                { offset: 0.5, color: '#25C45D' },
                { offset: 1, color: '#029A0E' }
            ]
        ]

        tempData = tempData.map((item, index) => {
            return {
                name: item,
                color: colorArr[index]
            }
        })
        option.series = tempData.map((item, index) => {
            return {
                name: item.name,
                type: 'bar',
                data: resp.data.data.result[0].source.map(arr => arr[item.name]),
                itemStyle: {
                   barBorderRadius: [20, 20, 20, 20],
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, item.color)
                }
            }
        })

        option && myChart.setOption(option);
         window.addEventListener('resize', function () {
        myChart.resize();
    });
    })

   
})
</script>

<template>
    <div id="school">

    </div>
</template>

<style scoped lang="scss">
#school {
    width: 100%;
    height: 100%;
}
</style>
